<template>
  <div id="ADD">
    <div class="top" style="padding: 1.25rem;border-bottom: 2px solid #ededed;">
      <van-icon name="arrow-left" />
      <span @click="to()">直课堂</span>
    </div>
    <main>
      <div class="time">
      <b>16:42</b>
      <p>拒绝躺平，学java，发展好，yyds</p>
    </div>
    <div class="img">
      <img src="java.jpg" alt="">
    </div>
    <div class="text">
      兄弟，千万别错过这个高薪宝藏岗位!3天直播,Java大牛手把手教学，带你快速入行，赶快上车!
    </div>
    <div class="bottom">
      <p>名额有限，立即抢购</p>
      <van-icon name="arrow" />
    </div>
    <div class="down">
      <div>笔试真题</div>
      <div>IT好课</div>
      <div @click="go()">个人中心</div>
    </div>
    </main>
  </div>
</template>

<script>
export default {
methods:{
  to(){
    this.$router.push("/chatone")
  },
  go(){
    this.$router.push("/homepage")
  }
}
}
</script>

<style lang="scss" scoped >
* {
 padding: 0;
 margin: 0;
 /* 将所有的标签变成怪异盒子 */
 box-sizing: border-box;
 font-size: 0.16rem;
} 
a,
u {
 text-decoration: none;
}
#ADD{
  background-color: #ededed;
  height: 31.25rem;
  .top{
    background-color: white;
  }
main{
  padding: 1.25rem;
  background-color: white;
  .time{
    p{
      font-weight: 700;
    }
  }
  .img{
    padding: .625rem;
   img{
    height: 10.625rem;
   }
  }
  .text{
    padding: .625rem;
    border-bottom: 2px solid #ededed ;
  }
  .bottom{
    padding: .9375rem 0 ;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p{
      color: #5bc8bb;
    }
  }
  .down{
    font-size: 1rem;
    height: 3.75rem;
    width: 18.75rem;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;

  }
}
  }
</style>